import React, { Component } from "react";
import {Row, Col} from "antd"

class Card extends Component {
    state = {
        num:1
    }
    componentDidMount () {
        const {bottom} = this.props
        if(bottom.length > 1){
            this.setState({
                num:4
            })
        }
    }
    render() {
        const { top, bottom} = this.props
        const {num} = this.state
        return <div className="home-card">
            <div className="card-top">
                {top.map((v, i) => {
                    return (
                        <div>
                            <p>{v.title}</p>
                            <h1>{v.value}</h1>
                        </div>
                    )    
                })}
            </div>
            <div className={`card-bottom${num}`}>
                <Row >
                    {bottom.map((v, i) => {
                        return (
                            <Col span={8}>
                                <div style={{textAlign:"center"}}>
                                    <p>{v.title}</p>
                                    <h1>{v.value}</h1>
                                </div>
                            </Col>
                        )    
                    })}
                </Row>
                
            </div>
        </div>;
    }
}

export default Card;